<template>
    <div class="goods-text">
        <router-link to="/" class="brand">{{this.$store.state.systemMessage.brand}}</router-link>
        <div class="name">{{goods.name}}</div>
        <div class="desc">{{goods.describe}}</div>
        <div class="type"><span>分类：</span>{{goodsType(goods.category)}}</div>
        <div class="price"><span>价格：</span>￥{{goods.price}}</div>
        <div class="stock"><span>库存：</span>{{hasStock(goods.stock)}}</div>
        <div class="comment">
            <span>评价:</span>
            <el-rate v-model="value1" @change="callBcak" disabled></el-rate>
        </div>
        <div class="goods-params">
            <span class="params-title">颜色：</span>
                <a class="goods-params-item" href="javascript:void(0)" v-for="(item, index) in goods.params" :key="index"
                   @click="paramsUrl2ShowUrl(item.url, index)"
                    :class="{isChoice: choiceNum == index}"
                    :title="item.title">
                    <img :src="item.url" :alt="item.title">
                </a>
        </div>
        <div class="goods-number">
            <span>数量：</span><el-input v-model="cart.num" placeholder="请输入内容" type="number" @change="changeNum" size="small" style="width: 100px;"></el-input>
        </div>
        <div class="btns">
            <el-button :class="{submit: goods.stock>0}" :disabled="false" @click="addCart"><span class="has-stock" v-if="goods.stock>0" >加入购物车</span><span v-else>暂无商品</span></el-button>
                <el-button class="collection" @click="collection"><span v-if="!isCollection">收藏</span><span v-else>已收藏</span> | {{goods.favorites}}</el-button>
        </div>
    </div>
</template>

<script>
    import {findLabel, eventBus} from "../../../common/util";
    import {sendwithpost} from "../../../network/profile";

    export default {
        name: "DetailGoodsText",
        props: {
            goods: {
                type: Object,
                default() {
                    return {}
                }
            },
            isCollection: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
                value1: 4.5,
                choiceNum: null,
                cart: {
                    num: 1,
                }
            }
        },
        mounted() {
        },
        methods: {
            callBcak() {
                console.log(this.value1);
            },
            changeNum() {
                if (this.num <= 0) {
                    this.num = 1
                }
            },
            goodsType(arr) {
                let str = findLabel(arr[0],this.$store.state.goodsType) +' ' +findLabel(arr[1],this.$store.state.goodsType)
                return str
            },
            hasStock(number) {
                if (number > 0) {
                    return '有货'
                } else {
                    return '缺货'
                }
            },
            paramsUrl2ShowUrl(url, index) {
                eventBus.$emit('paramsUrl2ShowUrl', url)
                this.choiceNum = index
                this.cart.params = this.goods.params[index].title
                this.cart.id = this.goods._id
                this.cart.showUrl = url
                this.cart.name = this.goods.name
                this.cart.price = this.goods.price
                this.cart.stock = this.goods.stock
            },
            collection() {
                if (this.$store.state.lognUser) {
                    sendwithpost({
                        url: '/collection',
                        data: {
                            id: this.goods._id,
                            isCollection: this.isCollection
                        }
                    }).then(res=> {
                        if (res.data.res_code == 2) {
                            if (this.isCollection) {
                                this.goods.favorites--
                            } else {
                                this.goods.favorites++
                            }
                            this.$store.commit('favorites', {id: this.goods._id, addOrSub: this.isCollection})
                            eventBus.$emit('changeCollection')
                        }
                    })
                } else {
                    this.$message({
                        showClose: true,
                        message: '请登录账户',
                        type: 'warning'
                    });
                    return
                }
            },
            addCart() {
                if (this.goods.isSell) {
                    if (this.$store.state.lognUser) {
                        console.log(this.cart.params)
                        if (this.cart.num > this.goods.stock) {
                            this.$message({
                                showClose: true,
                                message: '请填写少于当前库存量',
                                type: 'error'
                            })
                            return
                        } else {
                            if (this.cart.params === undefined) {
                                this.$message({
                                    showClose: true,
                                    message: '请选择商品参数',
                                    type: 'error'
                                })
                            } else {
                                this.cart.userId = this.$store.state.lognUser._id
                                sendwithpost({
                                    url: '/addCart',
                                    data: this.cart
                                }).then(res=> {
                                    this.$message({
                                        showClose: true,
                                        message: res.data.message,
                                        type: 'success'
                                    })
                                    if (res.data.res_code == 2) {
                                        this.cart.index = res.data.index
                                        this.$store.dispatch('getCart')
                                    }
                                })
                            }
                        }
                    } else {
                        this.$message({
                            showClose: true,
                            message: '请先登录'
                        })
                        return;
                    }
                }else {
                    this.$message({
                        showClose: true,
                        message: '当前商品暂停售卖'
                    })
                }


            }
        }
    }
</script>

<style scoped>
    .goods-text {
        background-color: #FAFAFA;
        padding: 1em;
        font-family: "宋体";
        line-height: 2em;

    }
    .goods-params {
        border-top: 1px solid #000000;
        line-height: 70px;
        display: flex;
        align-items: center;
        margin: 20px 0;
        padding: 10px 0;
    }
    .goods-params-item {
        display: inline-block;
        width: 50px;
        height: 50px;
        border: 1px solid #ebebeb;
    }

    .goods-params-item img {
        width: 100%;
    }
    .submit {
        background-color: rgb(255, 63,0);
    }
    .has-stock {
        color: #ffffff;
    }
    .submit .no-stock {
        color: #000000;
    }
    .btns {
        border-bottom: 1px solid #000000;
        margin: 20px 0;
        padding: 10px 2em;
    }
    .brand {
        text-decoration: none;
        color: #262626;
        display: block;
        height: 30px;
        line-height: 30px;
        font-size: 18px;
    }
    .brand:hover {
        text-decoration: underline;
        color: rgb(255, 63, 0);
    }
    .name {
        font-size: 15px;
        font-weight: 700;
        line-height: 1.5em;
    }
    .desc {
        color: red;
        font-size: 12px;
    }
    .type span, .price span, .stock span, .comment{
        font-size: 12px;
        color: #999999;
    }
    .type, .price, .stock {
        color: #000000;
        font-size: 15px;
        font-weight: 700;
    }
    .comment {
        display: flex;
        align-items: center;
    }
    .goods-params .params-title,  .goods-number span{
        font-size: 12px;
        font-weight: 700;
    }
    .goods-params .goods-params-item {
        margin: 0 5px;
    }
    .goods-params .isChoice {
        /*display: inline-block;*/
        border: 1px solid rgb(255, 63,0);
        /*border: none !important;*/
    }
</style>